<template>
    <div id="register">

        <div id="title">
            <h2>
                机构注册
            </h2>
        </div>
        <div id="form">
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm"
                     class="demo-ruleForm">
                <el-form-item prop="email">
                    <el-input type="text" placeholder="邮箱" v-model="ruleForm.email"/>
                </el-form-item>
                <el-form-item prop="pwd">
                    <el-input type="password" max="16" v-model="ruleForm.pwd" placeholder="6-16位密码，区分大小写"/>
                </el-form-item>
                <el-form-item prop="checkPass">
                    <el-input type="password" max="16"  v-model="ruleForm.checkPass" placeholder="确认密码"/>
                </el-form-item>
                <el-form-item prop="phone">
                    <el-input type="text" max="11" v-model="ruleForm.phone" placeholder="11位手机号"/>
                </el-form-item>
                <el-form-item prop="verificationCode" >
                    <el-input type="text" placeholder="输入验证码" v-model="ruleForm.verificationCode">
                        <el-button @click.prevent="captcha" :disabled="disabled1" slot="append">
                            <span v-if="!disabled1">获取验证码</span>
                            <span v-if="disabled1">({{num1}})获取验证码</span>
                        </el-button>
                    </el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click.prevent="submitForm('ruleForm')" type="primary" class="register-btn">提交</el-button>
                    <div class="register-link">
                        <el-link :underline="false" @click="login">使用已有帐户登录</el-link>
                    </div>
                </el-form-item>
            </el-form>
        </div>

    </div>
</template>

<script>
    import {Form, FormItem, Input, Button, Link} from "element-ui";
    import {post} from "../../../request/AxiosMAX";

    export default {
        name: "Register",
        components: {
            "el-form": Form,
            "el-form-item": FormItem,
            "el-input": Input,
            "el-button": Button,
            "el-link": Link
        },
        data() {
            const checkEmail = (rule, value, callback) => {
                const $regEmal =/\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*/;
                post("/api/Studies_to_travel/BaseRegister/queryByEmail",{email:value})
                    .then(res=>{
                        if (res.code===0){
                            if (value==='') {
                                return callback(new Error('邮箱不能为空'));
                            }else  if (!$regEmal.test(value)) {
                                setTimeout(() => {callback(new Error('输入的邮箱地址不合法')); }, 300);
                            }else if(!res.data){
                                return callback(new Error('邮箱已被注册'));
                            }else {
                                callback();
                            }
                        }
                    });



            };
            let validatePass = (rule, value, callback) => {
                const $regPass = /^[a-z0-9]{6,16}$/;
                if (value === '') {
                    callback(new Error('请输入密码'));
                } else if (!$regPass.test(value)) {
                    setTimeout(() => callback(new Error('输入的密码不合法')), 100);
                }else {
                    callback();
                }
            };
            let validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.pwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            };
            let validatePhone = (rule, value, callback) =>{
                const $reg = /^1[3-9]\d{9}$/;
                post("/api/Studies_to_travel/BaseRegister/queryByPhone",{phone:value})
                    .then(res=>{
                        if (res.code===0){
                            if (value === ''){
                                callback(new Error('手机号不能为空'))
                            } else if (!res.data){
                                callback(new Error('手机号已被注册'))
                            }else if (!$reg.test(value)){
                                callback(new Error('手机号格式错误'))
                            }
                            else callback();
                        }
                    });

            };
            let validateVerificationCode = (rule, value, callback) => {
                if (value === '') callback(new Error('验证码不能为空'));
                else callback();
            };

            return {
                disabled1:false,
                num1:60,
                ruleForm: {
                    pwd: '',
                    checkPass: '',
                    email: '',
                    phone: '',
                    //用户验证码
                    verificationCode: '',
                    //后台验证码
                    verification:'',
                    state:0
                },
                rules: {
                    pwd: [
                        {validator: validatePass, trigger: 'blur'}
                    ],
                    checkPass: [
                        {validator: validatePass2, trigger: 'blur'}
                    ],
                    email: [
                        {validator: checkEmail, trigger: 'blur'}
                    ],
                    phone: [
                        {
                            validator: validatePhone, trigger: 'blur'
                        }
                    ],
                    verificationCode: [
                        {
                            validator: validateVerificationCode, trigger: 'blur'
                        }
                    ]


                }
            };
        },
        methods: {
            //跳转登陆页面
            login(){
                this.$router.push("/login");
            },
            //提交
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        post("/api/Studies_to_travel/BaseRegister/save",this.ruleForm)
                            .then(res=>{
                            if (res.code===0){
                                this.$refs[formName].resetFields();
                                this.$message({
                                    message: '注册成功~',
                                    type: 'success'
                                });
                                //跳转登录页面
                                this.$router.push("/login");
                            }
                        }).catch(err=>{
                            console.info(err)
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //获取验证码
            captcha(){
                post("/api/Studies_to_travel/BaseRegister/verification",{phone:this.ruleForm.phone})
                    .then(res=>{
                        if (res.code===0){
                            //获取后台验证🐎
                            this.ruleForm.verification = res.data;
                            //定时器
                            let num = 60;
                            this.disabled1=true;
                            let  setInter=setInterval(()=>{
                                this.num1 = --num;
                                if(this.num1===0){
                                    this.disabled1=false;
                                    clearInterval(setInter);
                                }
                            },1000)
                        }
                    }).catch(err=>{
                    console.info(err);
                })
            },
        }
    }
</script>

<style scoped>
    #register {
        width: 500px;
        position: fixed;
        top: 50%;
        left: 50%;
        height: 100%;
        transform: translate(-50%, -30%);
    }

    #title {
        margin-left: 100px;
    }

    .phone {
        width: 350px;
    }

    .btn {
        margin-left: 260px;
        margin-top: -40px;
    }

    .register-btn {
        width: 200px;
    }

    .register-link {
        margin-left: 260px;
        margin-top: -40px;
    }
</style>
